import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text, ScrollView } from '@tarojs/components'
import './goods.scss'
import { connect } from '@tarojs/redux'
import { State, Props } from './goods.interface'

@connect(({ goods }) => ({
  ...goods,
}))

export class GoodsItem extends Component<State, Props> {
  constructor(props: Props) {
    super(props);
  }

  async componentDidMount() {
    const { dispatch } = this.props;
    await dispatch({
      type: 'goods/getGoods',
      payload: {}
    })
  }

  del0(number) {
    console.log(number);
    const regexp = /(?:\.0*|(\.\d+?)0+)$/;
    let new_number = number.replace(regexp, '$1');
    return new_number;
  }

  handleRedirectDetail(id) {
    Taro.navigateTo({
      url: '/pages/goods/detail/index?id=' + id
    });
  }

  render() {
    const { goods } = this.props;
    return (
      <ScrollView>
        <View className='list-row'>
          {
            goods.list && goods.list.map(function (item) {
              const { id, thumbnail, name, selling_price } = item;
              return <View className="goods-item">
                <View className='goods-item-image' onClick={this.handleRedirectDetail.bind(this, id)}>
                  <Image src={thumbnail} mode='widthFix' />
                </View>
                <View className='goods-item-content'>
                  <Text className='goods-item-content-title' onClick={this.handleRedirectDetail.bind(this, id)}>{name}</Text>
                  <View className='goods-item-content-buy'>
                    <View className='goods-item-content-buy-price'>
                      <View className='goods-item-content-buy-price-value'>
                        <Text className='goods-item-content-buy-price-unio'>￥</Text>
                        <Text>{selling_price}</Text>
                      </View>
                      <View className='goods-item-pad'>已有2734人付款</View>
                    </View>
                  </View>
                </View>
              </View>
            })
          }
        </View>
      </ScrollView>
    )
  }
}